<template>
  <div class="strut-div org-setup">
    <div class="org-setup-left">
      <el-row>
        <el-col :span="12">
          <div class="org-num">
            <label class="lcd-font">{{ orgNum[0] }}</label>
            <p>党组织总数</p>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="org-num">
            <label class="lcd-font">{{ orgNum[1] }}</label>
            <p>党委数</p>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="org-num">
            <label class="lcd-font">{{ orgNum[2] }}</label>
            <p>党总支数</p>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="org-num">
            <label class="lcd-font">{{ orgNum[3] }}</label>
            <p>党支部数</p>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="org-setup-right"><common-bar-chart ref="orgData" :config="orgDataConfig"></common-bar-chart></div>
  </div>
</template>

<script>
// import orgNum from '../../../../static/ht-party-org-num.json';
// import orgData from '../../../../static/ht-party-org.json';
import CommonBarChart from '@/components/common/common-bar-chart.vue';
var orgData = [];

export default {
  components: {
    CommonBarChart
  },
  data() {
    return {
      orgNum: '',
      orgDataConfig: {
        request: {
          url: 'url',
          params: {}
        },
        option: {
          id: 'orgDataBar',
          xAxis: [],
          axisLabel: {
            interval: 0,
            rotate: 25
          },
          y: [
            {
              axis: {
                min: 0,
                max: 350,
                name: '组织数'
              },
              title: '',
              data: [],
              color: '#3EA2FF',
              stack: '1'
            },
            {
              title: '',
              data: [],
              color: '#77F7E7',
              stack: '1'
            },
            {
              title: '',
              data: [],
              color: '#6B42F6',
              stack: '1'
            }
          ]
        }
      }
    };
  },
  mounted() {

    this.getOrganizationChart();
  },
  methods:{
    getOrganizationChart() {
      this.$get(this.$api.getOrganizationChart,{
        deptId: localStorage.getItem("mapId")
      }).then(res => {
        let _n1 = res.data[1].data.reduce(function(accumulator,current){
          return accumulator+current;
        });
        let _n2 = res.data[2].data.reduce(function(accumulator,current){
          return accumulator+current;
        });
        let _n3 = res.data[3].data.reduce(function(accumulator,current){
          return accumulator+current;
        });

        this.orgNum = [_n1+_n2+_n3,_n1,_n2,_n3];

        res.data.forEach(element => {
          orgData.push(element);
        });

        this.orgDataConfig.option.xAxis = res.data[0].data;

        this.orgDataConfig.option.y[0].title = res.data[1].name;
        this.orgDataConfig.option.y[0].data = res.data[1].data;
        this.orgDataConfig.option.y[1].title = res.data[3].name;
        this.orgDataConfig.option.y[1].data = res.data[3].data;
        this.orgDataConfig.option.y[2].title = res.data[2].name;
        this.orgDataConfig.option.y[2].data = res.data[2].data;

        this.$refs.orgData.initChart();

      })
    }
  }
};
</script>

<style scoped lang="scss" type="text/scss">
.org-setup {
  > div {
    float: left;
  }

  .org-setup-left {
    width: 400px;
    height: 266px;
    margin: 60px 50px;
    background-color: rgba(41, 85, 252, 0.18);
    overflow: hidden;
  }
  .org-num {
    margin: 0 20px;
    height: 133px;
    border-bottom: 1px solid #1a3f72;
    text-align: center;
    label {
      color: #fdd100;
      font-size: 50px;
      display: inline-block;
      margin-top: 25px;
    }
    p {
      color: #6beeff;
      font-size: 18px;
    }
  }

  .org-setup-right {
    width: 1350px;
    height: 100%;
  }
}
</style>
